//导航栏自定义ui
$treelist-nav-ui: (
    padding: 0 10px,
    background-color: $panel-navigation-background-color,
    toolstrip-background-color: #32404e,
    tool-float-indicator-color: $panel-header-background-color,
    tool-float-indicator-width: 5px,
    tool-indicator-selected-color: $panel-header-background-color,
    tool-indicator-selected-width: 5px,
    tool-selected-background-color: mix(white, $panel-navigation-background-color, 10%),
    item-expanded-background-color: #2c3845,
    item-line-height: $panel-navigation-item-line-height,
    row-over-background-color: mix(white, $panel-navigation-background-color, 5%),
    row-selected-background-color: mix(white, $panel-navigation-background-color, 10%),
    item-icon-color: $panel-navigation-item-text-color,
    item-expander-color: #fff,
    item-text-color: #ADB3B8,
    item-icon-over-color: #fff,
    item-expander-over-color: #fff,
    item-text-over-color: mix(white, $panel-navigation-item-text-color, 50%),
    item-text-font-size: 14px,
    item-icon-font-size: 18px,
    item-icon-width: 44px,
    item-expander-font-size: 16px,
    item-expander-width: 24px,
    row-indicator-width: 5px,
    row-indicator-selected-color: $panel-header-background-color,
    row-indicator-selected-over-color: lighten($panel-header-background-color, 7%),
    row-indicator-over-color: transparent
);

//左上角图标与文字样式
.sencha-logo {
    background-color: $base-color;
    height: 65px;

    font-size: 16px;
    color: $lightest-color;
    margin-left: 17px;
    //图标样式
    .main-logo {
        line-height: 65px;

        img {
            margin-left: 22px;
            margin-right: 22px;
            top: 8px;
            position: relative;
        }
    }
}

//全局背景
.navigationContainer {
    background-color: $panel-navigation-background-color;
        //美化滚动条效果
    &::-webkit-scrollbar {
        width: 1px;
    }
    //滚动条轨道
    &::-webkit-scrollbar-track {
        background-color: $panel-navigation-background-color;
    }
    &::-webkit-scrollbar-thumb {
         @include border-radius(3px);
        background-color: $panel-navigation-background-color;
    }
}

//顶部导航栏样式
.sencha-dash-dash-headerbar {
    padding: 0 30px 0 0;
    position: fixed;
    width: 100%;
    z-index: 10;
    border: none;

    .header-right-profile-image {
        border-radius: 20px;
    }
}

//导航栏折叠样式
.collapsed {
    .x-tree-elbow-img {
        display: none;
    }

    .x-tree-node-text {
        display: none;
    }
}
//导航栏折叠时样式
.x-treelist-item-tool {
    height: $panel-navigation-item-line-height;
}

//列表样式重写
.x-grid-cell{
    position: relative;
}

/*#region 按钮自定义ui扩展*/
@include extjs-button-small-ui(
    $ui: 'soft-blue',
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-blue',
    $line-height: 34px,
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-blue',
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-cyan',
    $background-color: $color-soft-cyan,
    $border-color: darken($color-soft-cyan, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-cyan',
    $background-color: $color-soft-cyan,
    $border-color: darken($color-soft-cyan, 5%)
);

@include extjs-button-small-ui(
    $ui: 'soft-green',
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-green',
    $line-height: 34px,
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-green',
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);

@include extjs-button-small-ui(
    $ui: 'soft-red',
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-red',
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);

@include extjs-button-small-ui(
    $ui: 'soft-purple',
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-purple',
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);

@include extjs-button-small-ui(
    $ui: 'gray',
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);
@include extjs-button-large-ui(
    $ui: 'gray',
    $line-height: 34px,
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'gray',
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);

@include extjs-button-small-ui(
    $ui: 'green',
    $background-color: $color-green,
    $border-color:darken($color-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'green',
    $background-color: $color-green,
    $border-color:darken($color-green, 5%)
);

@include extjs-button-small-ui(
    $ui: 'blue',
    $background-color: $color-blue,
    $border-color:darken($color-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'blue',
    $background-color: $color-blue,
    $border-color:darken($color-blue, 5%)
);

@include extjs-button-small-ui(
    $ui: 'header',
    $color: #999,
    $glyph-color: #919191,
    $background-color: #fff,
    $background-color-focus-over: darken(#fff, 5%),
    $border-width: 0
);
/*#endregion*/


